<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Download } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

import ChinaMap from '@/components/panel/components/chinaMap.json'
import PieChart from '@/components/panel/components/pieChart.vue'

const chinaMapRef = ref(null)

function draw() {
  let provinceData = [
    { name: '天津市', value: 88 },
    { name: '上海市', value: 66 },
    { name: '重庆市', value: 42 },
    { name: '河北省', value: 99 },
    { name: '河南省', value: 52 },
    { name: '云南省', value: 33 },
    { name: '辽宁省', value: 22 },
    { name: '黑龙江省', value: 22 },
    { name: '湖南省', value: 22 },
    { name: '安徽省', value: 22 },
    { name: '山东省', value: 22 },
    { name: '新疆维吾尔自治区', value: 22 },
    { name: '江苏省', value: 22 },
    { name: '浙江省', value: 22 },
    { name: '江西省', value: 15 },
    { name: '湖北省', value: 33 },
    { name: '广西壮族自治区', value: 22 },
    { name: '甘肃省', value: 88 },
    { name: '山西省', value: 16 },
    { name: '内蒙古', value: 56 },
    { name: '陕西省', value: 33 },
    { name: '吉林省', value: 99 },
    { name: '福建省', value: 28 },
    { name: '贵州省', value: 25 },
    { name: '广东省', value: 33 },
    { name: '青海省', value: 88 },
    { name: '西藏自治区', value: 25 },
    { name: '内蒙古自治区', value: 1 },
    { name: '四川省', value: 45 },
    { name: '宁夏回族自治区', value: 36 },
    { name: '海南省', value: 22 },
    { name: '台湾省', value: 22 },
    { name: '香港特别行政区', value: 22 },
    { name: '澳门特别行政区', value: 22 },
    { name: '南海诸岛', value: 12 },
  ]

  let option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c} 人',
    },
    visualMap: {
      min: 0,
      max: 100,
      realtime: true,
      calculable: true,
      inRange: {
        color: ['#C2E1F5', '#0096FF'],
      },
    },
    geo: {
      map: 'china',
      roam: false,
      label: {
        emphasis: {
          show: true,
        },
      },
    },
    series: [
      {
        geoIndex: 0,
        name: '地域分布',
        type: 'map',
        coordinateSystem: 'geo',
        map: 'china',
        data: provinceData,
      },
    ],
  }

  let myChart = echarts.init(chinaMapRef.value)
  echarts.registerMap('china', ChinaMap)
  myChart.setOption(option)
}

onMounted(() => {
  draw()
})

const pieData1 = reactive({
  color: ['#F8B912', '#0098FF'],
  title: '本省和外省患者',
  data: [
    { value: 400, name: '本省' },
    { value: 600, name: '外省' },
  ],
})

const pieData2 = reactive({
  color: ['#1CC721', '#EF6968'],
  title: '省内本市和外市患者',
  data: [
    { value: 300, name: '省内本市' },
    { value: 700, name: '省内外市' },
  ],
})

let tableData = [
  {
    province: '广东省',
    city: '广州市',
    total: '889',
  },
  {
    province: '海南省',
    city: '海口市',
    total: '889',
  },
  {
    province: '湖北省',
    city: '武汉市',
    total: '889',
  },
  {
    province: '江苏省',
    city: '南京市',
    total: '889',
  },
]

// tableData = tableData.concat(tableData) // 模拟多行数据，出现滚动条
</script>

<template>
  <div class="map">
    <div>患者地区分布</div>
    <div>
      <div ref="chinaMapRef" class="china"></div>
      <div class="info">
        <div class="parallel">
          <PieChart :pieData="pieData1"></PieChart>
          <PieChart :pieData="pieData2"></PieChart>
        </div>
        <div>
          <div class="parallel">
            <div>详细数据</div>
            <div class="export">
              <el-icon><Download /></el-icon>
              导出
            </div>
          </div>
          <el-table :data="tableData" border stripe size="small" class="table">
            <el-table-column prop="province" label="省份" align="center" />
            <el-table-column prop="city" label="城市" align="center" />
            <el-table-column prop="total" label="患者数量" align="center" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
:deep(.el-table th.el-table__cell) {
  color: var(--vt-c-white);
  background-color: #057ae3;
}

.map {
  min-width: 800px;
  height: 422px;
  background: var(--vt-c-white);
  margin-bottom: 12px;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 18px;

  > div:last-child {
    display: flex;
    align-items: top;
    justify-content: space-between;

    .china {
      min-width: 400px;
      width: 50%;
      height: 380px;
    }
    .info {
      width: 50%;
      max-width: 450px;

      .parallel {
        display: flex;
        align-items: top;
        justify-content: space-between;
        font-size: 16px;
        margin: 5px 0;

        .export {
          display: inline-block;
          font-size: 12px;
          margin-top: 6px;
        }
      }
      .table {
        width: 100%;
        max-height: 180px;
        overflow: auto;
      }
    }
  }
}
</style>
